<template>
  <view class="learn">
    <swiper class="head-bg">
      <swiper-item v-for="item in details.scenicIntroduces" :key="item.id">
        <image :src="item.imageUrl" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- <image class="head-bg" v-if="details.gameImg" :src="details.gameImg"></image> -->
    <view v-if="details.testTasks" class="boxs">
      <view class="taskBox">
        <view class="task">
          <view class=""> 任务数量</view>
          <view class="taskNumber">
            {{ details.testTasks.length }}
          </view>
        </view>
        <view class="clearance">
          <view class=""> 已通关人数</view>
          <view class="clearanceNumber">
            {{ details.personCount }}
          </view>
        </view>
      </view>
      <!--  -->
      <view class="text">
        <view class="text-w">
          <view class="h1">{{ details.name || "" }}</view>
        </view>
        <view class="p">
          {{ details.notice || "" }}
        </view>

        <view class="tags">
          <view v-for="(item, index) in details.typeNames" :key="index" class="tag">{{ item }}</view>
        </view>
        <view class="locationBox">
          <view class="location">
            <image
                class="locationImg"
                src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file8bcb788f66af40738e64afe6dd2765b6.png">
            </image>
            <view class="">
              {{ details.area }}
            </view>
          </view>
          <view class="fee"> ￥{{ details.fee }}</view>
        </view>
      </view>
      <view v-if="details.clearLevel" class="highestBox">
        <view class="record"> 最高记录</view>
        <view class="limit"> 单次任务上限10个</view>
      </view>
      <view v-if="details.clearLevel" class="highestDetails">
        <view class="nickBox">
          <image :src="details.clearLevel.url" class="nickImg" mode=""></image>
          <view class="nickName">
            {{ details.clearLevel.name }}
          </view>
        </view>
        <view class="completeBox">
          <view class="completeText"> 完成任务数</view>
          <view class="completeCount">
            {{ details.clearLevel.count }}
          </view>
        </view>
        <view v-if="tel != undefined" class="challengeBox" @click="challengeClick">
          挑战TA
        </view>
      </view>
      <!--  -->

      <view class="playing">
        <view class="title">玩法介绍</view>
        <view class="ps">
          <p v-html="details.playIntroduce"></p>
        </view>
      </view>

      <view class="text1">
        <view class="title">景点介绍</view>
        <view v-for="(item,index) in details.scenicTypes" :key="item.id"
              :class="['introduce',index == 0?'introduceOne':'']">
          <view class="introduceTitle">
            {{ item.typeName }}
          </view>
          <view class="ps">
            <p v-html="item.text"></p>
          </view>
        </view>

      </view>
      <!--  -->
      <view v-if="details.video">
        <view class="text1 text2">
          <view class="video-wrap">
            <video :src="details.video" class="video"></video>
          </view>
        </view>
        <!-- <view class="text1 text2">
          <view class="video-wrap">
            <t-video :src="details.video" style="width:100%;" />
          </view>
        </view> -->
      </view>

      <view class="playing">
        <view class="title">用户须知</view>
        <view class="ps">
          <p v-html="details.playRemark"></p>
        </view>
      </view>
    </view>
    <view v-if="tel != undefined" class="challengeButton" @click="challengeClick">
      我要挑战
    </view>
    <view class="" style="padding-top: 100rpx;">

    </view>
  </view>
</template>

<script>
import {
  scenicDetail
} from "@/api/challenge";

export default {
  data() {
    return {
      details: {},
      tel: ""
    };
  },
  onLoad(scenicId) {
    console.log(scenicId);
    if (scenicId.id) this.getScenicDetail(scenicId.id);
    this.tel = uni.getStorageSync('userinfo').phone

  },
  methods: {
    challengeClick() {
      uni.navigateTo({
        url: "/pages/home/AddTrip"
      })
    },
    getScenicDetail(scenicId) {
      scenicDetail({
        scenicId,
      }).then((res) => {
        console.log("详情", res);
        this.details = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.learn {
  .head-bg {
    width: 100%;
    height: 350rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .boxs {
    transform: translateY(-10rpx);
    box-shadow: 0 -8rpx 0 8rpx rgba(26, 145, 113, 1);
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx 20rpx 0 0;
    background: rgba(255, 255, 255, 1);
    position: relative;
    z-index: 1;

    .text {
      box-sizing: border-box;
      width: 100%;
      padding: 30rpx 24rpx;
      border-radius: 25rpx;
      background: rgba(255, 254, 222, 1);
      box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.1);
      margin-bottom: 40rpx;
      font-size: 24rpx;
      line-height: 34.75rpx;
      position: relative;

      .text-w {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
      }

      .tag {
        margin: 5rpx;
        width: 140rpx;
        height: 40rpx;
        border-radius: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        // position: absolute;
        z-index: 1;
        // right: 40rpx;
        // bottom: 30rpx;
        background: rgba(0, 186, 173, 1);
      }

      .h1 {
        font-size: 36rpx;
        margin-bottom: 6rpx;
        line-height: 52rpx;
      }
    }

    .text1 {
      width: 100%;
      border-radius: 20rpx;
      // background: rgba(255, 255, 255, 1);
      // box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
      margin-bottom: 40rpx;

      .title {
        font-size: 36rpx;
        font-weight: 700;
        line-height: 90rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 100%;
        height: 90rpx;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        background: rgba(43, 122, 251, 1);
      }

      .introduce {
        margin-top: 50rpx;
        padding-top: 20rpx;
        box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
        border-radius: 10px 10px 10px 10px;

        .introduceTitle {
          width: 200rpx;
          border-radius: 10rpx;
          margin: auto;
          text-align: center;
          background: #f57d05;
          color: #fff;
        }

        .ps {
          padding: 20rpx 20rpx 40rpx;
          box-sizing: border-box;
          text-indent: 2em;

        }

        .p {
          font-size: 24rpx;
          line-height: 34.75rpx;
          color: rgba(56, 56, 56, 1);
        }
      }

      .introduceOne {
        margin-top: 0rpx;
        border-radius: 0rpx 0rpx 20rpx 20rpx;
      }


    }

    .text2 {
      padding: 20rpx 20rpx 40rpx;
      box-sizing: border-box;

      .video-wrap {
        width: 100%;
        position: relative;

        .video {
          width: 100%;
          height: 350rpx;
          object-fit: contain;
        }

        .t0,
        .t1,
        .t2 {
          width: 140rpx;
          height: 40rpx;
          border-radius: 10rpx;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 40rpx;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          position: absolute;
          z-index: 1;
          right: 40rpx;
          bottom: 30rpx;
        }

        .t0 {
          background: rgba(0, 186, 173, 1);
        }

        .t1 {
          background: rgba(42, 130, 228, 1);
        }

        .t2 {
          background: rgba(245, 125, 5, 1);
        }
      }
    }
  }
}

.taskBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .task {
    width: 45%;
    padding: 10rpx 0;
    border-radius: 10rpx;
    text-align: center;
    background: linear-gradient(180deg,
        rgba(255, 235, 59, 1) 0%,
        rgba(255, 251, 212, 1) 100%);

    .taskNumber {
      color: red;
    }
  }

  .clearance {
    width: 45%;
    padding: 10rpx 0;
    border-radius: 10rpx;
    text-align: center;
    background: linear-gradient(180deg,
        rgba(116, 214, 241, 1) 0%,
        rgba(255, 251, 212, 1) 100%);

    .clearanceNumber {
      color: red;
    }
  }
}

.locationBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rpx;

  .location {
    display: flex;
    flex-wrap: wrap;
    font-size: 30rpx;

    .locationImg {
      width: 30rpx;
      height: 34rpx;
      margin-right: 6rpx;
    }
  }

  .fee {
    font-size: 34rpx;
    color: red;
    font-weight: 600;
    margin-left: 20rpx;
  }
}

.highestBox {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .record {
    font-size: 40rpx;
    font-weight: 600;
  }

  .limit {
    font-size: 30rpx;
  }
}

.highestDetails {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin: 20rpx 0 30rpx 0;
  border-radius: 16rpx;
  box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);

  .nickBox {
    display: flex;
    align-items: center;
    margin: 0 20rpx;

    .nickImg {
      width: 60rpx;
      height: 60rpx;
    }

    .nickName {
      margin-left: 6rpx;
    }
  }

  .completeBox {
    display: flex;
    align-items: center;

    .completeText {
      margin-right: 6rpx;
    }

    .completeCount {
      color: #d43030;
      font-size: 40rpx;
    }
  }

  .challengeBox {
    color: #16a8e1;
    margin-right: 8rpx;
  }
}

.playing {
  width: 100%;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.24);
  margin-bottom: 40rpx;

  .title {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 90rpx;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    width: 100%;
    height: 90rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    background: rgba(43, 122, 251, 1);
  }


  .ps {
    padding: 20rpx 20rpx 40rpx;
    box-sizing: border-box;
    text-indent: 2em;

  }

  .p {
    font-size: 24rpx;
    line-height: 34.75rpx;
    color: rgba(56, 56, 56, 1);
  }


}

.challengeButton {
  width: 260rpx;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  background: #169bd5;
  color: #fff;
  margin: auto;
  border-radius: 10rpx;
}
</style>
